<article class="cl pd-20">
    <form action="" method="post" class="form form-horizontal" id="form-save">
        <div id="tab-system" class="HuiTab">
            <div class="tabBar cl"><span>基本设置</span><span>SEO设置</span><span>留言邮箱设置</span></div>
            <div class="tabCon">
                <div class="row cl">
                    <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>网站名称：</label>
                    <div class="formControls col-xs-8 col-sm-9">
                        <input type="text" id="name" placeholder="控制在25个字、50个字节以内" value="{$data.name}" name="name"
                            class="input-text">
                    </div>
                </div>
                <div class="row cl">
                    <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>logo：</label>
                    <div class="formControls col-xs-8 col-sm-9">
                        <input type="text" id="input-picture-logo" placeholder="logo 路径" value="{$data.logo}"
                            name="logo" class="input-text">
                    </div>
                    <div class="formControls col-xs-8 col-sm-4 col-xs-offset-4 col-sm-offset-2">
                        <div style="max-width: 200px;" id="picture-logo" class="div-picture">
                            <img id="view-picture-logo"
                                src="{$data.logo ? $data.logo : '/static/images/upload_picture.png'}" alt="logo"
                                title="{$data.title_pic ? '更换' : '添加'}logo" style="max-width: 200px;max-height: 200px;">
                        </div>
                    </div>
                </div>
                <div class="row cl">
                    <label class="form-label col-xs-4 col-sm-2">备案号：</label>
                    <div class="formControls col-xs-8 col-sm-9">
                        <input type="text" id="website-icp" placeholder="京ICP备00000000号" value="{$data.icp}" name="icp"
                            class="input-text">
                    </div>
                </div>
                <div class="row cl">
                    <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>底部版权信息：</label>
                    <div class="formControls col-xs-8 col-sm-9">
                        <input type="text" id="website-copyright" placeholder="&copy; 版权所有" value="{$data.copyright}"
                            name="copyright" class="input-text">
                    </div>
                </div>
                <div class="row cl">
                    <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>网站地址：</label>
                    <div class="formControls col-xs-8 col-sm-9">
                        <input type="text" id="website-url" placeholder="www.suryee.com" value="{$data.url}" name="url"
                            class="input-text">
                    </div>
                </div>
                <div class="row cl">
                    <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>公司地址：</label>
                    <div class="formControls col-xs-8 col-sm-9">
                        <input type="text" id="website-static" placeholder="公司地址" value="{$data.address}" name="address"
                            class="input-text">
                    </div>
                </div>
                <div class="row cl">
                    <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>联系人：</label>
                    <div class="formControls col-xs-8 col-sm-9">
                        <input type="text" id="contacts" placeholder="联系人" value="{$data.contacts}" name="contacts"
                            class="input-text">
                    </div>
                </div>
                <div class="row cl">
                    <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>联系电话：</label>
                    <div class="formControls col-xs-8 col-sm-9">
                        <input type="text" id="tel" placeholder="联系电话" value="{$data.tel}" name="tel"
                            class="input-text">
                    </div>
                </div>
                <div class="row cl">
                    <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>手机号码：</label>
                    <div class="formControls col-xs-8 col-sm-9">
                        <input type="text" id="mobile_phone" placeholder="手机号码" value="{$data.mobile_phone}"
                            name="mobile_phone" class="input-text">
                    </div>
                </div>
                <div class="row cl">
                    <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>传真号码：</label>
                    <div class="formControls col-xs-8 col-sm-9">
                        <input type="text" id="fax" placeholder="传真号码" value="{$data.fax}" name="fax"
                            class="input-text">
                    </div>
                </div>
                <div class="row cl">
                    <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>邮箱账号：</label>
                    <div class="formControls col-xs-8 col-sm-9">
                        <input type="text" id="email" placeholder="邮箱账号" value="{$data.email}" name="email"
                            class="input-text">
                    </div>
                </div>
                <div class="row cl">
                    <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>QQ：</label>
                    <div class="formControls col-xs-8 col-sm-9">
                        <input type="text" id="qq" placeholder="QQ" value="{$data.qq}" name="qq" class="input-text">
                    </div>
                </div>
                <div class="row cl">
                    <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>二维码：</label>
                    <div class="formControls col-xs-8 col-sm-9">
                        <input type="text" id="input-picture-wxofficialode" placeholder="公众号二维码 路径"
                            value="{$data.qrcode}" name="qrcode" class="input-text">
                    </div>
                    <div class="formControls col-xs-8 col-sm-4 col-xs-offset-4 col-sm-offset-2">
                        <div style="max-width: 200px;" id="picture-wxofficialode" class="div-picture">
                            <img id="view-picture-wxofficialode"
                                src="{$data.qrcode ? $data.qrcode : '/static/images/upload_picture.png'}"
                                alt="logo" title="{$data.qrcode ? '更换' : '添加'}公众号二维码"
                                style="max-width: 200px;max-height: 200px;">
                        </div>
                        <span>公众号二维码</span>
                    </div>
                    <div class="formControls col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-2">
                        <textarea class="textarea" id="qrcode_desc" name="qrcode_desc" cols="30" rows="10">{$data.qrcode_desc}</textarea>
                    </div>
                </div>
            </div>
            <div class="tabCon">
                <div class="row cl">
                    <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>SEO标题：</label>
                    <div class="formControls col-xs-8 col-sm-9">
                        <input type="text" id="title" placeholder="请输入SEO标题" value="{$data.title}" name="title"
                            class="input-text">
                    </div>
                </div>
                <div class="row cl">
                    <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>关键词：</label>
                    <div class="formControls col-xs-8 col-sm-9">
                        <input type="text" id="key" placeholder="5个左右,8汉字以内,用英文,隔开" value="{$data.key}" name="key"
                            class="input-text">
                    </div>
                </div>
                <div class="row cl">
                    <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>描述：</label>
                    <div class="formControls col-xs-8 col-sm-9">
                        <input type="text" id="description" placeholder="空制在80个汉字，160个字符以内" value="{$data.des}"
                            name="des" class="input-text">
                    </div>
                </div>
                <div class="row cl">
                    <label class="form-label col-xs-4 col-sm-2">统计代码：</label>
                    <div class="formControls col-xs-8 col-sm-9">
                        <textarea class="textarea" id="tongji" name="tongji">{$data.tongji}</textarea>
                    </div>
                </div>
            </div>
            <div class="tabCon">
                <div class="row cl">
                    <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>留言邮箱通知：</label>
                    <div class="formControls col-xs-8 col-sm-9">
                        <div class="switch size-S" data-on-label="是" data-off-label="否">
                            <input type="checkbox" {if $data.message_send_mail==1}checked{/if} name="message_send_mail"
                                id="message_send_mail">
                        </div>
                    </div>
                </div>
                <div class="row cl">
                    <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>SMTP服务器：</label>
                    <div class="formControls col-xs-8 col-sm-9">
                        <input type="text" id="email_host" placeholder="请输入SMTP服务器" value="{$data.email_host}"
                            name="email_host" class="input-text">
                    </div>
                </div>
                <div class="row cl">
                    <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>安全协议:</label>
                    <div class="formControls col-xs-8 col-sm-9">
                        <input type="text" id="email_secure" placeholder="secure, 一般为ssl协议" value="{$data.email_secure}"
                            name="email_secure" class="input-text">
                    </div>
                </div>
                <div class="row cl">
                    <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>服务器端口：</label>
                    <div class="formControls col-xs-8 col-sm-9">
                        <input type="text" id="email_port" placeholder="服务器端口 25 或者465 具体要看邮箱服务器支持"
                            value="{$data.email_port}" name="email_port" class="input-text">
                    </div>
                </div>
                <div class="row cl">
                    <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>账号：</label>
                    <div class="formControls col-xs-8 col-sm-9">
                        <input type="text" id="email_username" placeholder="即邮箱的用户名" value="{$data.email_username}"
                            name="email_username" class="input-text">
                    </div>
                </div>
                <div class="row cl">
                    <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>密码：</label>
                    <div class="formControls col-xs-8 col-sm-9">
                        <input type="text" id="email_password" placeholder="密码部分邮箱是授权码(例如163邮箱)"
                            value="{$data.email_password}" name="email_password" class="input-text">
                    </div>
                </div>
                <div class="row cl">
                    <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>发件人：</label>
                    <div class="formControls col-xs-8 col-sm-9">
                        <input type="text" id="email_from" placeholder="发件人, 一般和邮箱的用户名一致" value="{$data.email_from}"
                            name="email_from" class="input-text">
                    </div>
                </div>
                <div class="row cl">
                    <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>收件人：</label>
                    <div class="formControls col-xs-8 col-sm-9">
                        <input type="text" id="email_to" placeholder="收件人" value="{$data.email_to}" name="email_to"
                            class="input-text">
                    </div>
                    <div class="formControls col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-2">
                        <span class="c-red">多个收件人用英文','隔开</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="row cl">
            <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-2">
                <button class="btn btn-primary radius" type="button" onClick="save();"><i
                        class="Hui-iconfont">&#xe632;</i> 保存</button>
                <button onClick="layer_close();" class="btn btn-default radius"
                    type="button">&nbsp;&nbsp;取消&nbsp;&nbsp;</button>
            </div>
        </div>
    </form>
    <!-- 图像上传 -->
    <div>
        <input type="file" hidden name="image" id="upload_picture">
    </div>
</article>

<script type="text/javascript">
    jQuery.Huitab = function (tabBar, tabCon, class_name, tabEvent, i) {
        var $tab_menu = $(tabBar);
        // 初始化操作
        $tab_menu.removeClass(class_name);
        $(tabBar).eq(i).addClass(class_name);
        $(tabCon).hide();
        $(tabCon).eq(i).show();

        $tab_menu.bind(tabEvent, function () {
            $tab_menu.removeClass(class_name);
            $(this).addClass(class_name);
            var index = $tab_menu.index(this);
            $(tabCon).hide();
            $(tabCon).eq(index).show()
        })
    }

    $(function () {
        $('.skin-minimal input').iCheck({
            checkboxClass: 'icheckbox-blue',
            radioClass: 'iradio-blue',
            increaseArea: '20%'
        });
        $.Huitab("#tab-system .tabBar span", "#tab-system .tabCon", "current", "click", "0");

        $('.switch').on('switch-change', function (e, data) {
            var $el = $(data.el), value = data.value;
            if (value == true) {
                $("#message_send_mail").val(1);
            } else {
                $("#message_send_mail").val(0);
            }
        });
    });

    (function () {
        const div_picture = document.getElementsByClassName('div-picture');
        const file = document.querySelector('input[type="file"]');

        function uploadimg(div_id) {
            file.oninput = function () {
                if (file.files && file.files[0]) {
                    var formData = new FormData();
                    formData.append("upload_file", file.files[0]);
                    $.ajax({
                        url: '{:url("sys/file_manager/uploadImage")}',
                        type: "post",
                        data: formData,
                        processData: false, // 告诉jQuery不要去处理发送的数据
                        contentType: false, // 告诉jQuery不要去设置Content-Type请求头
                        dataType: 'json',
                        success: function (res) {
                            // console.log(res);
                            // console.log(div_id);
                            file.value = null;
                            var img = res.data.filename;
                            $("#view-" + div_id).attr('src', img);
                            $("#input-" + div_id).val(img);
                            layer.msg(res.msg, {
                                icon: 1,
                                time: 1000
                            });
                        },
                        error: function (res) {
                            layer.msg(res.msg, {
                                icon: 5,
                                time: 1000
                            });
                            return false;
                        }
                    });
                }
            }
        }

        for (let div of div_picture) {
            div.addEventListener('click', function (e) {
                let id = this.id;
                // file模拟input点击事件
                var evt = new MouseEvent("click", {
                    bubbles: false,
                    cancelable: true,
                    view: window,
                });
                file.dispatchEvent(evt, uploadimg(id));
            }, false);
        }
    })()

    // 保存
    function save() {
        var formData = $("#form-save").serializeArray();
        $.ajax({
            url: '{:url("/sys/system/save")}',
            type: "post",
            data: formData,
            dataType: 'json',
            success: function (res) {
                layer.msg(res.msg, {
                    icon: 1,
                    time: 1000
                });
                window.location.reload();
            },
            error: function (res) {
                layer.msg(res.msg, {
                    icon: 5,
                    time: 1000
                });
                return false;
            }
        });
    }


</script>